<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<title>立即注册</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<style>
			body {
				margin: 0px;
				padding: 0px;
			}
			
			.top {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 1.3rem;
			}
			
			.tubiao {
				position: absolute;
				left: 0.5rem;
				color: #696969;
			}
			
			.biaoti {
				font-size: 0.5rem;
				color: #181818;
			}
			
			.biaodan form {
				text-align: center;
				width: 100%;
				position: relative;
				/*background:red;*/
			}
			
			.biaodan input {
				width: 7.5rem;
				hieght: 2rem;
				padding: 0.25rem 0rem;
				margin-bottom: 1rem;
				border: 0.02rem solid #ccc;
				font-size: 0.4rem;
				border-radius: 0.1rem;
				padding-left: 0.8rem;
				box-sizing: border-box;
			}
			
			.biaodan input:nth-of-type(1) {
				margin-top: 0.5rem;
				background: url(imges/user-logo.png)no-repeat left center;
				background-size: 0.7rem;
			}
			
			.biaodan input:nth-of-type(2) {
				width: 5rem;
			}
			
			.biaodan input:last-child {
				padding-left: 0px;
			}
			
			input[type=password] {
				background: url(imges/pwd-logo.png)no-repeat left center;
				background-size: 0.7rem;
			}
			
			.yanzhengma {
				display: inline-block;
				width: 2.5rem;
				height: 0.45rem;
				border: 0.02rem solid #ccc;
				border-radius: 0.1rem;
				padding: 0.25rem 0rem;
				color: #31b8ee;
			}
			
			.fasong {
				display: inline-block;
				width: 2.5rem;
				height: 0.45rem;
				border: 0.02rem solid #ccc;
				border-radius: 0.1rem;
				padding: 0.25rem 0rem;
				color: #9C9C9C;
				background: #ECE9E9;
			}
			
			.biaodan .denglu {
				background: linear-gradient(to bottom, #3fa9f5, #45a4d8);
				border: none;
				color: white;
			}
			
			.phones {
				display: none;
				position: absolute;
				left: 1.2rem;
				top: 1.7rem;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
				font-size: 0.4rem;
				color: #dc3632;
			}
			
			.mimas1 {
				display: none;
				position: absolute;
				left: 1.2rem;
				top: 5.7rem;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
				font-size: 0.4rem;
				color: #dc3632;
			}
			
			.mimas2 {
				display: none;
				position: absolute;
				left: 1.2rem;
				top: 7.7rem;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
				font-size: 0.4rem;
				color: #dc3632;
			}
			
			.code {
				display: none;
				position: absolute;
				left: 1.2rem;
				top: 3.7rem;
				background: url(imges/ts.png)no-repeat left center;
				background-size: 0.5rem;
				padding-left: 0.6rem;
				font-size: 0.4rem;
				color: #dc3632;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<span class="fa fa-angle-left tubiao" style="font-size:50px;color:#ccc;" onclick="javascript:history.go(-1)"></span>
			<div class="biaoti">
				<p>注册</p>
			</div>
		</div>
		<div class="biaodan">
			<form action="" method="">
				<input type="text" placeholder="请输入手机号" id="phone" />
				<div class="phones"></div>
				<input type="text" placeholder="请输入验证码" id="Code" />
				<div class="code"></div>
				<span class="yanzhengma" id="ma">发送验证码</span>
				<span class="fasong" id="ma">59秒后重新获取</span>
				<input type="password" placeholder="设置密码" id="pass" />
				<div class="mimas1"></div>
				<input type="password" placeholder="请重新输入密码" id="pass1" />
				<div class="mimas2"></div>
				<input type="button" value="登 录" class="denglu" />
			</form>
			<div style="text-align: center;font-size:0.38rem;">
				<div>
					<span class="fa fa-star" style="font-size:24px;color:#ccc;"></span>
					手机号码必须为真实的有效的11为数字；
				</div>
				<div style="margin-top:0.5rem;">
					<span class="fa fa-star" style="font-size:24px;color:#ccc;"></span> 
					密码长度为6-16字符必须包含数字 字母 符号中至少两种;
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script>
			$(start);

			function start() {
				//发送短信59秒后重新获取先隐藏
				$(".fasong").hide(); //发送短信验证隐藏
				$("#phone").focus(
					function() {
						$(this).css({
							"border": "0.02rem solid #3366FF"
						}).siblings().css("border", "");
						if($(this).val() == "") {
							$(".phones").text("手机号不能为空").show();
						}
					}
				)
				$("#phone").keyup(
					function() {
						$(this).css({
							"border": ""
						});
						if($(this).val() != "") {
							$(".phones").text("").hide();
						}
						//手机号码的正确格式
						var req1 = /^1[34578]\d{9}$/;
						//获取手机号的值
						var phoneval = $(this).val();
						//不能出现空格
						var space = phoneval.indexOf(" ") == -1;
						//验证正则
						var zhengze = req1.test(phoneval)
						if(!space) {
							$(".phones").text("不能出现空格").show();
							return false;
						} else if(zhengze == false) {
							$(".phones").text("手机号码格式不正确").show();
							return false;
						} else {
							$(".phones").text("输入正确").show();
							//手机号码输入正确后才能点击发送短信验证码,否则不能点击（没反应）;
							var x = 59;
							$("#ma").click(
								function() {
									$(this).hide();
									$(".fasong").show();
									$(".fasong").text(x + "秒后重新获取");
									var timer = setInterval(function() {
										$(".fasong").text(--x + "秒后重新获取");
									}, 1000);
									setTimeout(function() {
										clearInterval(timer);
										$(".fasong").hide();
										$(".yanzhengma").show();
										x = 59;
										$(".yanzhengma").text("重新发送");
									}, 60000)
								}
							)
							//设定验证码,验证验证码的正确
							var VerificationCode = 5896;
							$("#Code").focus(
								function() {
									$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");
								}
							)
							$("#Code").keyup(
								function() {
									//									$(this).css("border", "");
									if($(this).val() == "") {
										$(".code").text("验证码不能为空").show();
										return false;
									} else if($(this).val() != VerificationCode) {
										$(".code").text("验证码错误").show();
										return false;
									} else {
										$(".code").text("输入正确").show();
										return true;
									}
								}
							)
							return true;
						}
					}
				)
				//第一次输入密码验证
				$("#pass").focus(
					function() {
						var passval = $(this).val();
						$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");
						if(passval == "") {
							$(".mimas1").text("请输入密码").show();
						}
					}
				)
				$("#pass").keyup(
					function() {
						//						$(this).css("border", "");
						var passval = $(this).val();
						//						var reg=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
						//						if(reg.test(passval)==false){
						//							$(".mimas1").text("密码格式不正确").show();
						//							return false;
						//						}else{
						//							$(".mimas1").text("输入正确").show();
						//						}
						//密码长度为6-16个字符并且必须包含数字 字母 符号中至少两种
						var space1 = passval.indexOf(" ") == -1;
						var reg1 = /[a-zA-z]+/;
						var reg2 = /\d+/;
						var reg3 = /[^a-zA-Z0-9]+/;
						if(passval.length < 6 || passval.length > 16) {
							$(".mimas1").text("密码长度为6-16个字符").show();
							return false;
						} else if(!space1) {
							$(".mimas1").text("密码不能有空格").show();
							return false;
						} else if(reg1.test(passval) && reg2.test(passval)) {
							$(".mimas1").text("输入正确").show();
							return true;
						} else if(reg1.test(passval) && reg3.test(passval)) {
							$(".mimas1").text("输入正确").show();
							return true;
						} else if(reg2.test(passval) && reg3.test(passval)) {
							$(".mimas1").text("输入正确").show();
							return true;
						} else {
							$(".mimas1").text("必须包含数字 字母 符号中至少两种").show();
							return false;
						}
					}
				)
				//第二次输入密码验证
				$("#pass1").focus(
					function() {
						$(this).css("border", "0.02rem solid #3366FF").siblings().css("border", "");
						$(".mimas2").text("请输入密码").show();
					}
				)
				$("#pass1").keyup(
					function() {
						//						$(this).css("border", "");
						if($("#pass1").val() == "") {
							$(".mimas2").text("请输入密码").show();
							return false;
						} else if($(this).val() != $("#pass").val()) {
							$(".mimas2").text("两次密码输入不一致").show();
							return false;
						} else {
							$(".mimas2").text("两次密码输入一致").show();
							return true;
						}
					}
				)
				$(".denglu").click(
					function() {
						var reg1 = /^1[34578]\d{9}$/;
						var reg2 = 5896;
						var reg3 = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
						if(reg1.test($("#phone").val()) && $("#Code").val() == reg2 && reg3.test($("#pass").val()) && $("#pass1").val() == $("#pass").val()) {
							location.href = "首页.html";
						} else {
							return false;
						}
					}
				)
			}
		</script>
	</body>

</html>